<template>
    <div class="p-header">
        <div class="title">航空器灾害事故分析与预测</div>
        <div class="fixed-right">
            <div class="time-box">
                <span>2024-01-31</span>
                <span class="date">00:00:00</span>
            </div>

            <!-- <el-dropdown style="font-size: 20px;">
                <span style="display: flex;align-items: center;">
                    欢迎你: {{ aaaa }} &nbsp;
                    <el-avatar shape="square" :size="40" fit="fill" />
                </span>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="e" divided @click="loginout">退出登陆</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
</el-dropdown> -->

            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="loginout" divided
                        >退出登陆</el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        handleCommand(command) {
            // this.$message('click on item ' + command);
            if (command == "loginout") {
                this.loginout();
            }
        },
        loginout() {
            // const user = sessionStorage.getItem("sysUser")
            // let sysUser = JSON.parse(user);

            this.$confirm("您确定要退出吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // router.push('/')
                    sessionStorage.removeItem("jwt_token");
                    sessionStorage.removeItem("sysUser");
                    sessionStorage.setItem("loginOut", "123");
                    this.$message({
                        type: "success",
                        message: "退出登录成功！",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "退出登录异常",
                    });
                });
        },
    },
};

// const toMySelfInfo = () => {
//     router.push('/selfCenter')
// }

// const props = defineProps({
//     title: {
//         type: String,
//         default: () => '航空器灾害事故分析与预测'
//     }
// })

// onBeforeUnmount(() => {
//     cancelAnimationFrame(run)
// })
</script>

<style scoped>
.p-header {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-color: white;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid black;
}
</style>
